<template>
  <header ref="header" id="header" class="header bg-white animated">
    <div class="navbar-container">
<!--      {{ $store.state }}-->
      <a href="/" class="navbar-logo" @click="handlePage">

        <!--        <img :src="headerConfig.avatar" alt=""/>-->

        <svg xmlns="http://www.w3.org/2000/svg"
             width="96" height="38">
          <text x="48" y="19" alignment-baseline="middle" text-anchor="middle"
                 font-size="26">
            木之下
          </text>
          <line x1="0" y1="18" x2="96" y2="24" stroke="#313131"/>
          <line x1="0" y1="30" x2="96" y2="31" stroke="#313131"/>
        </svg>
      </a>
      <div class="navbar-menu">
        <div v-for="(item,index) of headerConfig.navMenu" :key="index">
          <a :class="{current:$route.path === item.route}"
             :href="item.route" :target="item.type == 0 ? '_blank' : '_self'">{{ item.title }}</a>
          <ul v-if="item.showChild">
            <li v-for="tmp of item.children">
              <a :href="tmp.route">{{ tmp.title }}</a>
            </li>
          </ul>
        </div>


      </div>

      <a :href="headerConfig.searchPage" class="navbar-search">
        <span class="icon-search"></span>
      </a>

      <!-- 移动端显示 -->
      <div @click="showMobileMenu = !showMobileMenu" class="navbar-mobile-menu"
           :class="{'navbar-mobile-menu-on':showMobileMenu}">
        <span class="icon-menu cross"><span class="middle"></span></span>
        <ul ref="mobileMenu">
          <li :class="{'navbar-menu-categorys':item.children.length > 0}"
              :key="index"
              v-for="(item,index) of headerConfig.navMenu">
            <a :href="item.route" v-if="item.type === 1">{{ item.title }}</a>
            <a :href="item.route" v-else>
              {{ item.title }}
            </a>
            <ul v-if="item.children.length > 0">
              <li v-for="tmp of item.children">
                <a :href="tmp.route">{{ tmp.title }}</a>
              </li>
            </ul>
          </li>
        </ul>
      </div>

    </div>
  </header>
</template>

<script>


  //import {L2Dwidget} from 'live2d-widget'
  import { getBlogInfo } from '~/api/category'


  export default {
    name: 'NuxtVueHeader',

    computed: {},
    data () {
      return {
        headerConfig: {
          siteUrl: '',
          avatar: '',
          navMenu: [
            {
              title: '分类',
              route: '/archive',
              showChild:false,
              children: [
                {
                  title: '点滴记录',
                  route: ''
                },
                {
                  title: '资源分享',
                  route: ''
                },
                {
                  title: '代码记录',
                  route: ''
                },
                {
                  title: '计算科学',
                  route: ''
                },
              ]
            },
            {
              title: '影视',
              route: '/movies',
              children: []
            },
            {
              title: '简笔',
              route: '/cross',
              children: []
            },
            {
              title: '下载',
              route: '/download',
              children: []
            },
            {
              title: '音乐',
              route: '/music',
              children: []
            },
            {
              title: '友链',
              route: '/links',
              children: []
            },
            {
              title: '关于',
              route: '/about',
              children: []
            },
            {
              title: '后台',
              route: '/admin',
              children: [],
              type: 0
            },
            {
              title: '相册',
              route: '/photos',
              children: []
            },
          ],
          searchPage: '/search'
        },
        beforeScrollTop: 0,
        afterScrollTop: 0,
        up: -1,
        showMobileMenu: false,
        blogInfo: {},
        // pageName: '',
        meta: [],
      }
    },
    methods: {
      handlePage () {
        // eventBus.$emit('handlePage',1)
      },
      getBlogInfo () {
        this.$axios({
          url: '/blog/info/get',
          method: 'GET'
        }).then(({ data }) => {
          let blogInfo = {}
          for (let item of data.data.blogInfo) {
            blogInfo[item.oId] = item.optionValue
          }
          this.$store.commit('SET_STORE_VALUE', {
            blogInfo: blogInfo
          })

          this.$store.commit("SET_STORE_VALUE",{
            blogTitle :  blogInfo.blogTitle,
            subTitle:blogInfo.blogSubtitle
          })
        })
      },
      getUserInfo() {
        this.$axios({ url:"/user/message", method:"POST", }).then(({data})=>{})
      },
      getCategory() {
        this.$axios({ url:"/category/get", method:"GET"}).then(({data}) => {
          let nav = this.headerConfig.navMenu
          nav[0].children = data.data.map((item) => {
            return {title: item.categoryTitle, route: `/category/${item.categoryURI}`}
          })
          nav[0].showChild = true
        })
      },

    },
    mounted () {
      new Headroom(this.$el, {
        offset: 0,
        tolerance: 0,
        classes: {
          initial: 'headroom',
          pinned: 'slideDown',
          unpinned: 'slideUp'
        }
      }).init()

      // const quicklink = require('quicklink/dist/quicklink.mjs')
      //
      //   window.addEventListener('load', () => {
      //     quicklink.listen();
      //     // quicklink.prefetch();
      //     //
      //   });


      // this.getUserInfo()
      this.getCategory()
      // this.getBlogInfo()
      this.$nextTick(() => {
        const L2Dwidget = require('live2d-widget').L2Dwidget
        L2Dwidget.init({
          pluginRootPath: 'https://cdn.jsdelivr.net/gh/Arrowfield/live2d-vue@master/live2dw/',
          pluginJsPath: 'lib/',
          pluginModelPath: 'live2d-widget-model-shizuku/assets/',
          // tagMode: true,
          debug: false,
          model: { jsonPath: 'https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json' },
          display: {
            position: 'left',
            width: 200,
            height: 400,
            hOffset: -40,
            vOffset: -80
          },
          mobile: { show: true },
          log: false,
          dialog: {
            // 开启对话框
            enable: true,
            'script': {
              'tap body': '哎呀！别碰我！',
              'tap face': '人家是在认真写博客哦--前端妹子',
            }
          }
        })
      })
    }
  }
</script>
<style lang="scss" scoped>
  .header {
    //font-family: 'Arizonia', cursive;
  }

  .navbar-mobile-menu .navbar-menu-categorys ul {
    position: absolute;
    top: 0;
    left: 0;
    right: unset;
    width: 100px;
    margin: 5px 0 0 -95px;
    border-radius: 15px;
    background-color: rgba(255, 255, 255, .95);
    -webkit-transition: .5s;
    transition: .5s;

  }

  .navbar-mobile-menu .navbar-menu-categorys ul:before {
    position: absolute;
    top: 9px;
    right: -7px;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid rgba(255, 255, 255, .95);
    content: '';
  }
  .navbar-menu div {
    &:hover ul {
      opacity: 1;
      visibility: visible;
    }
  }
  .navbar-menu div ul {
    &:before {
      position: absolute;
      top: -7px;
      left: 43px;
      border-right: 7px solid transparent;
      border-left: 7px solid transparent;
      border-bottom: 7px solid rgba(238, 238, 238, .95);
      content: '';
    }

    li {
      display: inline;
      overflow: hidden
    }

    position: absolute;
    left: 50%;
    width: 100px;
    margin: -10px 0 0 -50px;
    padding: 0;
    border-radius: 15px;
    background-color: rgba(238, 238, 238, .95);
    opacity: 0;
    visibility: hidden;
    transition: .3s;
    box-shadow: 0 2px 4px rgb(0 0 0 / 30%);
    overflow: hidden;
    li a {
      font-size: 15px;
      line-height: 1;
      display: block;
      text-align: center;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      margin: 0;
      padding: 15px;
    }

  }




</style>
